<lx-stepper lx-id="{{ vm.stepperId }}" lx-cancel="vm.cancel()" lx-complete="vm.complete()" lx-layout="{{ vm.layout }}" lx-show-controls="false">
    <lx-step lx-label="Step 1">
        <div flex-container="row" flex-align="center center" class="bgc-grey-300" style="height: 200px">
            <span class="fs-title">Step 1</span>
        </div>
    </lx-step>
    <lx-step lx-label="Step 2">
        <div flex-container="row" flex-align="center center" class="bgc-grey-300" style="height: 200px">
            <span class="fs-title">Step 2</span>
        </div>
    </lx-step>
    <lx-step lx-label="Step 3">
        <div flex-container="row" flex-align="center center" class="bgc-grey-300" style="height: 200px">
            <span class="fs-title">Step 3</span>
        </div>
    </lx-step>
</lx-stepper>

<div class="divider divider--dark"></div>

<div class="p++">
    <lx-button ng-click="vm.previousStep()" ng-disabled="vm.isStep.first">Previous Step (external)</lx-button>
    <lx-button ng-click="vm.nextStep()" ng-if="!vm.isStep.last">Next Step (external)</lx-button>
    <lx-button ng-click="vm.nextStep()" ng-if="vm.isStep.last" ng-disabled="vm.stepperCompleted">Complete (external)</lx-button>
    <lx-button ng-click="vm.cancelStepper()">Cancel (external)</lx-button>

    <lx-button ng-click="vm.toggleLayout()">Toggle layout</lx-button>
</div>
